import { fileURLToPath, URL } from 'node:url'
//引用svg需要用到插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'node:path'
//mock插件提供方法
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  //获取各种环境下对应的变量
  let env = loadEnv(mode, process.cwd())
  return {
    plugins: [
      vue(),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
      viteMockServe({
        enable: command === 'serve',
      }),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    //scss全局变量配置项
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
    //代理跨域
    server: {
      proxy: {
        [env.VITE_APP_BASE_API]: {
          //获取数据的服务器地址设置
          target: env.VITE_SERVE,
          //需要代理跨域
          changeOrigin: true,
          //路径重写
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
        [env.VITE_APP_BASE_INFO_API]: {
          //获取数据的服务器地址设置
          target: env.VITE_INFO_SERVE,
          //需要代理跨域
          changeOrigin: true,
          //路径重写
          rewrite: (path) => path.replace(/^\/info/, ''),
        },
      },
    },
  }
})

// 在这个 `vite.config.js` 文件中，`server.proxy` 配置项用于设置代理服务器，
// 以解决开发环境中的跨域问题。具体来说，它会将特定的请求代理到另一个服务器，从而避免浏览器的同源策略限制。
// ### 配置项解释
//
// 1. **`[env.VITE_APP_BASE_API]` 和 `[env.VITE_APP_BASE_INFO_API]`**:
//    - 这些是环境变量，通常在 `.env` 文件中定义。例如：
//      ```
//      VITE_APP_BASE_API=/api
//      VITE_APP_BASE_INFO_API=/info
//      ```
//    - 这意味着所有以 `/api` 或 `/info` 开头的请求都会被代理。
//
// 2. **`target`**:
//    - 这是目标服务器的地址。例如：
//      ```
//      VITE_SERVE=http://example.com/api
//      VITE_INFO_SERVE=http://another-example.com/info
//      ```
//    - 所有以 `/api` 开头的请求会被代理到 `http://example.com/api`，所有以 `/info` 开头的请求会被代理到 `http://another-example.com/info`。
//
// 3. **`changeOrigin: true`**:
//    - 这个选项会改变请求的 `Origin` 头，使其与目标服务器的 `Origin` 匹配，从而避免跨域问题。
//
// 4. **`rewrite`**:
//    - 这是一个函数，用于重写请求路径。例如：
//      ```javascript
//      rewrite: (path) => path.replace(/^\/api/, '')
//      ```
//    - 这意味着所有以 `/api` 开头的请求路径会被去掉 `/api` 前缀。例如，`/api/users` 会被重写为 `/users`。
//
// ### 使用效果
//
// 假设你在开发环境中有一个请求：
//
// ```javascript
// axios.get('/api/users')
// ```
//
// 在没有代理的情况下，浏览器会直接向 `http://localhost:3000/api/users` 发送请求，
// 但由于同源策略，可能会遇到跨域问题。
// 通过代理配置后，Vite 会将这个请求代理到 `http://example.com/api/users`，
// 并且由于 `rewrite` 配置，实际请求的路径会被重写为 `http://example.com/users`。
// 这样，浏览器会认为请求仍然是在 `http://localhost:3000` 上进行的，从而避免了跨域问题。
//
// ### 总结
// 通过 `server.proxy` 配置，你可以将开发环境中的请求代理到另一个服务器，从而避免跨域问题。
// 这对于开发过程中与后端 API 进行交互非常有用。
